<template>
  <div class="home all-bj">
    <div class="header">
      <div class="header-img">
        <img src="../../assets/img/no_match_slices/image_no_result@2x.png" alt="">
      </div>
      <div class="header-title">
        <p>根据您的选项查询无结果呢</p>
        <p>可能是组合出错了哦~~</p>
      </div>
    </div>
    <div class="btn">
      <a @click="reAnswer" ><img :src="btn_img" alt=""></a>
    </div>
    <div class="footer">
      <p>活动说明："酒咔嚓"仅做推荐，不参与购买环节，所有购买均在第三方电商平台上进行。</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userName: '',
      btn_img: require('../../assets/img/button_status/btn_again@2x.png'),
      locationData: ''
    }
  },
  methods: {
    reAnswer () {
      this.logs('无结果重新答题')
      sessionStorage.removeItem('options')
      this.$router.push('/Topic_1')
    },
    getUrlParam (name, url) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = url.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return ''
    },
    location () {
      const that = this
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function (position) {
            var longitude = position.coords.longitude
            var latitude = position.coords.latitude
            const str = longitude + ',' + latitude
            that.locationData = str
            return true
          },
          function (e) {
            var msg = e.code
            var dd = e.message
            console.log(msg)
            console.log(dd)
          }
        )
      }
    },
    logs (opEvent) {
      const that = this
      const logs = {
        'module': '活动',
        'sub_module': '京东智能选酒',
        'op_event': opEvent,
        'query_column': location.href,
        'source': this.getUrlParam('source', location.href),
        'useragent': navigator.userAgent,
        'geo_location': that.locationData
      }
      const params = JSON.stringify(logs)
      const logsUrl = `${location.protocol}//recomm.9kacha.com/record_log.php`
      this.$ajax.post(logsUrl, params).then(res => {
        console.log(res)
      }, err => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.location()
    this.logs('无结果页面')
  }
}
</script>

<style scoped lang="less">
  @import "../../lib/less/variable.less";
.home{
  width: 100%;
  height: 100%;
  .header{
    width: 100%;
    .header-img{
      .pt(20);
      width: 100%;
      text-align: center;
      img{
        width: 15%;
        object-fit: cover;
      }
    }
    .header-title{
      text-align: center;
      .pt(10);
      p{
        font-weight: bold;
        .fs(15);
        font-family: PingFangSC;
        color: #fff;
      }
    }

  }
  .btn{
    width: 100%;
    text-align: center;
    .pt(25);
    a{
      width: 100%;
      img{
        width: 32%;
        object-fit: cover;
      }
    }
  }
  .footer{
    position: absolute;
    left: 0;
    bottom: 0;
    .padding(13,13);
    p{
      .fs(12);
      color: #fff;
      font-family:PingFangSC-Medium;
      .lh(17);
    }
  }
  @media screen and (min-width: 750px) {
    .header{
      .header-img{
        img{
          width: 10%;
          object-fit: cover;
        }
      }
      .header-title{
        p{
          font-weight: bold;
          .fs(13);
        }
      }

    }
    .btn{
      a{
        img{
          width: 20%;
          object-fit: cover;
        }
      }
    }
    .footer{
      p{
        .fs(10);
        .lh(17);
        text-align: center;
      }
    }
  }
}
</style>
